<template>
  <div class="search-view">
    <div class="search-div">
      <el-button
        type="primary"
        class="search-btn"
        :icon="Search"
        @click="searchAccidents"
        >拉框查询</el-button
      >
    </div>
    <div class="search-table" v-show="tableData.length > 0">
      <el-table :data="tableData" class="el-table" @row-click="handleRowClick">
        <el-table-column prop="event_num" label="事件编号" />
        <el-table-column prop="level" label="事故级别" />
        <el-table-column prop="area" label="事故区域" />
        <el-table-column prop="name" label="事故类型" />
        <el-table-column prop="car_num" label="车牌号" />
        <el-table-column prop="phone" label="手机号" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { inject, onBeforeUnmount, onMounted, ref } from 'vue'
import { DrawEvent, DrawRect } from '@antv/l7-draw'
import { getEventData } from '@/api'
import { pointsWithinPolygon } from '@turf/turf'
import { PointLayer } from '@antv/l7'
const { map, scene } = inject('mapscene')
const tableData = ref([])
let drawer = null
let eventData = null
let pointLayer = null
onMounted(async () => {
  map.flyTo({
    center: [114.264247, 30.59431],
    zoom: 10,
    speed: 2,
    pitch: 0,
  })
  // 获取数据 解构出data,改名为eventData
  const { data } = await getEventData()
  eventData = data
})
// 清空地图和表格数据的方法
const clearView = () => {
  // 销毁之前的绘制器
  if (drawer) {
    drawer.destroy() // 销毁
    drawer = null
  }
  // 移除之前的点图层
  if (pointLayer) {
    scene.removeLayer(pointLayer)
    pointLayer = null
  }
  // 清空表格数据
  tableData.value = []
}
//点击按钮 拉框查询
const searchAccidents = () => {
  clearView()
  // 创建drawer实例
  drawer = new DrawRect(scene, {
    autoActive: false, // 不自动激活
    multiple: false, // 不允许多个绘制
  })
  // 开启绘制
  drawer.enable()
  // 监听绘制事件
  drawer.on(DrawEvent.Add, drawData => {
    // drawData 记录了绘制的要素信息=>geojson格式
    // 调用turf库中的API,pointsWithinPolygon 返回在多边形内的点数据
    // eventData 为点数据集合   drawData 为多边形数据
    const points = pointsWithinPolygon(eventData, drawData)
    //地图上显示点数据
    pointLayer = new PointLayer({
      name: 'eventLayer',
    })
    pointLayer
      .source(points)
      .shape('circle')
      .color('red')
      .size(30)
      .active(true)
      .animate(true)
    scene.addLayer(pointLayer)

    //表格上渲染数据
    const newEventData = points.features.map(item => {
      //返回一个对象,包含properties中的所有属性和geometry中的coordinates属性
      return {
        ...item.properties,
        coordinates: item.geometry.coordinates,
      }
    })
    tableData.value = newEventData
  })
}

//表格点击跳转地点 row为点击的行数据
const handleRowClick = row => {
  // 跳转地点
  map.flyTo({
    center: row.coordinates,
    zoom: 14,
    speed: 2,
  })
}
// 组件卸载前清空地图和表格数据
onBeforeUnmount(() => {
  clearView()
})
</script>
<style lang="scss" scoped>
.search-view {
  width: 100%;
  height: 100%;
  .search-div {
    .search-btn {
      position: absolute;
      width: 100px;
      height: 40px;
      top: 300px;
      left: 10px;
    }
  }
  .search-table {
    position: absolute;
    left: 20%;
    bottom: 100px;
    width: 60%;
    z-index: 10;
    .el-table {
      max-height: 300px;
      //添加滚动条
      overflow-y: scroll;
    }
  }
}
</style>
